<template>
    <div class="qr-code" ref="boxRef"></div>
</template>

<script lang="ts">
import QRCodeGen from 'qrcode-generator';
import { defineComponent, onMounted, onUpdated, ref } from 'vue';

export default defineComponent({
    name: 'qr-code',
    setup(props, { slots }) {
        const boxRef = ref()
        onUpdated(updateDom)
        onMounted(updateDom)
        function updateDom() {
            console.log(123)
            if (!slots.default) return;
            const vnode = slots.default()[0]
            if (!vnode) return;
            const qr = QRCodeGen(0, 'H')
            qr.addData(vnode.text ?? '')
            qr.make()
            boxRef.value.innerHTML = qr.createSvgTag()
        }
        return {
            boxRef: boxRef
        }
    }
})
</script>

<style scoped>
:deep svg {
    display: block;
    height: 100%;
    width: 100%;
}
</style>